<template>
    <div class="detail-root">
        <BackHeader>
           大学资料
        </BackHeader>
        <div class="data-block">
            <div class="data-rgba">
                <span class="data-name">大学资料</span>
                <span class="data-Ename">LITERATURE</span>
            </div>
        </div>
        <div class="select-box" >
            <div class="select-count">
                <div :class="selectType=='ReadCount'?'font-name':''" @click="changeType('ReadCount')">
                    阅读量
                    <div :class="selectType=='ReadCount'?'underline':''"></div>
                </div>
                <div :class="selectType=='BorrowCount'?'font-name':''" @click="changeType('BorrowCount')">
                    借阅量
                    <div :class="selectType=='BorrowCount'?'underline':''"></div>
                </div>
                <div :class="selectType=='BuyCount'?'font-name':''" @click="changeType('BuyCount')">
                    购买量
                    <div :class="selectType=='BuyCount'?'underline':''"></div>
                </div>
            </div>
        </div>
        <component :is="selectType" class="cream"></component>
       
        
    </div>
</template>

<script>
import ReadCount from "../components/ReadCount.vue"; 
import BorrowCount from "../components/BorrowCount.vue"; 
import BuyCount from "../components/BuyCount.vue"; 
import BackHeader from "../components/BackHeader.vue"; 
import {mapState} from 'vuex';
export default{
    data(){
        return{
            selectType:"ReadCount"
        }
    },
    methods:{
        changeType(a){
            this.selectType=a
        }
    },
    computed:{
        ...mapState(["books"]),
    },
    components:{
        ReadCount,
        BorrowCount,
        BuyCount,
        BackHeader
    },
    
}
</script>

<style scoped>
    .detail-root{
        height: 100vh;
    }
    .data-block{
        width: 92.3vw;
        height: 29.1vw;
        margin: 0 auto;
        border-radius: 1.1vw;
        background-image: url();
        background-size: 100% 100%;
    }
    .data-rgba{
        width: 100%;
        height: 100%;
        border-radius: 1.1vw;
        background-color: rgba(122,122,122,0.6);
        text-align: center;
        line-height: 29.1vw;
    }
    .data-name{
        color: #ffffff;
        font-size: 4.8vw;
        font-weight: bold;
        margin-right:6vw; 
    }
    .data-Ename{
        color: #ffffff;
        font-size: 4.8vw;
        font-weight: bold;
    }
    .select-box{
        border-bottom:1px solid #eeeeee
    }
    .select-count{
        margin: 4vw 11.6vw;
        display:flex;
        font-size:4.3vw;
        color: #999999; 
        justify-content: space-between;
    }
    .font-name{
      color: #6464ff;
    }
    .underline{
      width: 100%;
      background-color: #6464ff;
      border: 0.4vw solid #6464ff;
      position: relative;
      top: 4vw;
      border-radius: 1.1vw;
    }
    .cream{
        width:92.3vw ;
        margin: 5.5vw auto;
        margin-bottom:0; 
    }
</style>